<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>React 实例</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>

<div id="example"></div>
<script type="text/babel">
class Toggle extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
        num : 123,
        inputValue:'input的值'
    };//声明变量 等于vue的data(){return num : 123}

  }
  //事件
  handleClick() {
    this.setState(prevState => ({
        num: 666
    }));
  }
  //事件
  changInput(status) {
    console.log(status,'status')
    this.setState(prevState => ({
        inputValue: '修改后的input值'
    }));
  }

  render() {
    return (
        <div>
            <p>{this.state.num}</p>
            <button onClick={this.handleClick.bind(this)}>
               点击改变值
            </button>
            <hr/>
             <p>{this.state.inputValue}</p>
            <input value={this.state.inputValue} readOnly={true}></input>
            <button onClick={this.changInput.bind(this,123)}>改变输入框的内容</button>
        </div>

    );
  }
}

ReactDOM.render(
  <Toggle />,
  document.getElementById('example')
);
</script>

</body>
</html>



